<template>
  <div class="detail" v-if="goodsDetail">
    <van-nav-bar @click-left="onClickLeft">
      <template #left>
        <img src="@/assets/img/detail/goback.png">
      </template>
      <template #title>
        <div class="item-header">
          <div :class="{ 'item-tab': true, 'btn-active': true }">
            <div class="img">
              <img v-show="true" src="@/assets/img/detail/position.png">
            </div>
            商品
          </div>
          <div class="item-tab">
            <div class="img">
              <img v-show="false" src="@/assets/img/detail/position.png">
            </div>
            详情
          </div>
        </div>
      </template>
    </van-nav-bar>
    <van-swipe @change="onChange">
      <van-swipe-item @click="onClick" v-for="img in swipeImgs" :key="img">
        <img :src="img">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ swipeImgs.length }}</div>
      </template>
    </van-swipe>
    <div class="guidance">
      {{ goodsDetail.userGuide.guideText }}
      <em>
        {{ goodsDetail.userGuide.guideButtonText }}
        <i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i>
      </em>
    </div>
    <div class="title">
      <div class="txt">
        {{ goodsDetail.productBaseInfo.productName }}
      </div>
      <div class="collect">
        <i class="yu-ui-iconfont yu-ui-icon-shoucang"></i>
        <span>收藏</span>
      </div>
    </div>
    <div class="item-price">
      <div class="price">
        <div class="left">
          <p>
            <span class="prefix">￥</span>
            <span class="money">{{ goodsDetail.productBaseInfo.price }}</span>
            <span>/{{ goodsDetail.productBaseInfo.realUnit }}</span>
          </p>
        </div>
        <span class="mini">{{ goodsDetail.productBaseInfo.minimumOrderQuantity }}{{ goodsDetail.productBaseInfo.realUnit
        }}起订</span>
      </div>
      <div class="member">
        <em>{{ goodsDetail.memberPriceTagBean.tag }}</em>
        <span>
          {{ goodsDetail.memberPriceTagBean.actionText }}
          <i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i>
        </span>
      </div>
      <p class="sku-info">
        <em>未税单价：</em>
        <span>￥{{ goodsDetail.productBaseInfo.excludingTaxPrice }}(税率{{ goodsDetail.productBaseInfo.taxRate }}%)</span>
      </p>
      <p class="sku-info">
        <em>订货编码：</em>
        <span>{{ goodsDetail.productBaseInfo.skuNo }}<i class="yu-ui-iconfont yu-ui-icon-fuzhi copy-icon"></i></span>
      </p>
      <p class="sku-info">
        <em>商品型号：</em>
        <span>{{ goodsDetail.productBaseInfo.materialNo }}</span>
      </p>
    </div>
    <div class="divide"></div>
    <div class="addr">
      <van-cell is-link @click="popShow = true">
        <template #title>
          <span>
            配送至
            <img src="@/assets/img/detail/addr.png">
            <em>{{ addr }}</em>
          </span>
        </template>
        <template #right-icon>
          <i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i>
        </template>
      </van-cell>
      <van-popup v-model="popShow" position="bottom" :style="{ height: '45%' }">
        <van-area @confirm="getAddr" @cancel="popShow = false" title="请选择城市" :area-list="areaList" value="110000"
          :columns-num="2" />
      </van-popup>
      <div class="desc">
        <p>
          <span class="item">
            <span class="tag goods">现货</span>
            <span class="txt">当日发货，预计3天后送达</span>
          </span>
        </p>
        <p>
          <span class="item" v-if="addrTips">
            <div class="tag">{{ addrTips.tagText }}</div>
            <div class="txt">{{ addrTips.freightInfo }}...</div>
            <span class="look" @click="showAddrTip">查看</span>
          </span>
        </p>
      </div>
    </div>
    <div class="divide"></div>
    <div class="serve">
      <van-cell is-link @click="serveShow = true">
        <template #title>
          <span>服务</span>
        </template>
        <template #right-icon>
          <i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i>
        </template>
        <template #default>
          <em v-for="tag in goodsDetail.productServices.productServiceText" :key="tag">
            <i class="yu-ui-iconfont yu-ui-icon-xuanze1"></i>
            {{ tag }}
          </em>
        </template>
      </van-cell>
      <van-action-sheet v-model="serveShow" title="服务">
        <div class="content" v-html="serveHtml"></div>
      </van-action-sheet>
    </div>
    <div class="divide"></div>
    <div class="param">
      <van-cell is-link @click="paramShow = true">
        <template #title>
          <span>参数</span>
        </template>
        <template #right-icon>
          <i class="yu-ui-iconfont yu-ui-icon-xiangyou"></i>
        </template>
        <template #default>
          <span>{{ goodsDetail.skuSpecifications[0].name }}：{{ goodsDetail.skuSpecifications[0].value }}</span>
        </template>
      </van-cell>
      <van-action-sheet v-model="paramShow" title="规格参数">
        <div class="content">
          <ul>
            <li v-for="item in goodsDetail.skuSpecifications" :key="item.name">
              <span class="name">{{ item.name }}</span>
              <span class="value">{{ item.value }}</span>
            </li>
          </ul>
        </div>
      </van-action-sheet>
    </div>
    <div class="divide"></div>
    <div class="intro">
      <div class="titles">产品介绍</div>
      <div class="content" v-html="goodsDetail.productIntroduction.skuDesc"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon text="客服">
        <template #icon>
          <i class="yu-ui-iconfont yu-ui-icon-kefu"></i>
        </template>
      </van-goods-action-icon>
      <van-goods-action-icon @click="goPage('cart')" text="购物车">
        <template #icon>
          <i class="yu-ui-iconfont yu-ui-icon-gouwuche"></i>
        </template>
      </van-goods-action-icon>
      <van-goods-action-icon text="加入清单">
        <template #icon>
          <i class="yu-ui-iconfont yu-ui-icon-qingdan"></i>
        </template>
      </van-goods-action-icon>
      <van-goods-action-button>
        <template #default>
          <van-stepper v-model="goodsNum" min="1" max="50" />
        </template>
      </van-goods-action-button>
      <van-goods-action-button @click="addCart" type="danger" text="加入购物车" />
    </van-goods-action>
    <div class="quick" @click="quickShow = true">
      <img src="@/assets/img/detail/quick-nav.png">
    </div>
    <van-overlay :show="quickShow" @click="quickShow = false">
      <div class="wrapper" @click.stop>
        <div class="content">
          <img src="@/assets/img/detail/quick-nav.png" @click="quickShow = false">
          <div class="item" @click="goPage('home')">
            <i class="yu-ui-iconfont yu-ui-icon-shouye"></i>
            首页
          </div>
          <div class="item" @click="goPage('type')">
            <i class="yu-ui-iconfont yu-ui-icon-xuanxing"></i>
            选型
          </div>
          <div class="item" @click="goPage('cart')">
            <i class="yu-ui-iconfont yu-ui-icon-gouwuche"></i>
            购物车
          </div>
          <div class="item" @click="goPage('person')">
            <i class="yu-ui-iconfont yu-ui-icon-gerenzhongxin"></i>
            个人中心
          </div>
          <div class="item">
            <i class="yu-ui-iconfont yu-ui-icon-kefu"></i>
            客服
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
  
<script>
import "@/assets/iconfont/search.css"
import { areaList } from '@vant/area-data';
import { Dialog } from 'vant';
import { ImagePreview } from 'vant';

export default {
  data() {
    return {
      goodsItem: {},
      current: 0,
      swipeImgs: [],
      goodsDetail: "",
      addr: "北京市",
      popShow: false,
      areaList,
      addrTips: "",
      serveHtml: "",
      serveShow: false,
      paramShow: false,
      goodsNum: 1,
      quickShow: false
    }
  },
  created() {
    this.$api.getGoodsDetail().then(res => {
      this.swipeImgs = res.data.images;
      this.goodsDetail = res.data;

      this.$apiProxy({
        url: "/product/freight?skuNo=AA5976&clearance=0",
        method: "get"
      }).then(res1 => {
        this.addrTips = res1.data
      })

      this.$apiProxy({
        url: '/static/html/detailPriceIntro.html?version=1.33.0',
        method: "get"
      }).then(res2 => {
        this.serveHtml = res2;
      })
    });
    this.goodsItem.goodsId = this.$route.params.id;
    this.goodsItem.goodsName = this.$route.params.name;
    this.goodsItem.goodsImg = this.$route.params.img;
    this.goodsItem.goodsPrice = this.$route.params.price;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onChange(index) {
      this.current = index;
    },
    getAddr(val) {
      this.popShow = false;
      this.addr = val[1].name
    },
    showAddrTip() {
      Dialog.alert({
        title: '运费规则',
        message: this.addrTips.freightDesc,
        theme: 'button',
        messageAlign: "left",
        confirmButtonColor: "#f74747",
        confirmButtonText: "确定"
      }).then(() => {
        // on close
      });
    },
    onClick() {
      ImagePreview({
        images: this.swipeImgs,
        startPosition: this.current,
      });
    },
    goPage(name) {
      if (name == 'cart') {
        this.$router.push({
          name,
          next: `/${name}`
        })
      }
      else {
        this.$router.push({ name })
      }
    },
    addCart() {
      if (this.$store.getters.getUserInfo) {
        this.$store.dispatch("addCartAsync", {
          goods_id: this.goodsItem.goodsId,
          img_url: this.goodsItem.goodsImg,
          multi_buy_limit: 50,
          price: this.goodsItem.goodsPrice,
          name: this.goodsItem.goodsName
        }).then(res => {
          this.$toast(res.msg)
        })
      }
      else {
        this.$router.push({
          name: "login",
          query: {
            next: this.$route.path
          }
        })
      }
    }
  },
}
</script>

<style lang="less">
.detail {
  .van-nav-bar {
    position: fixed;
    left: 0;
    right: 0;

    .van-nav-bar__content {
      .van-nav-bar__left {
        width: 29px;
        height: 47px;
        padding: 0;
      }

      .van-nav-bar__title {
        .item-header {
          display: flex;
          line-height: 47px;

          .item-tab {
            height: 47px;
            border-bottom: 1px solid transparent;
            font-size: 16px;
            color: #333;
            margin: 0 9px;
            padding: 0 3px;
            position: relative;
            top: -1px;

            .img {
              display: inline-block;
              width: 11px;
              height: 14px;
              margin-right: 5px;

              img {
                margin: -5px 6px 0 0;
              }
            }

          }

          .btn-active {
            color: #f74747;
          }
        }
      }
    }
  }

  .van-nav-bar::after {
    display: none;
  }

  .van-swipe {
    .van-swipe__track {
      .van-swipe-item {
        background-color: #fff;
        margin-top: 1px;
        position: relative;
        box-shadow: inset 0 -1px 2px #eee;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 300px;
          padding-bottom: 22.5px;
          padding-top: 22.5px;
        }
      }

    }

    .custom-indicator {
      position: absolute;
      right: 12px;
      bottom: 15px;
      z-index: 9;
      text-align: center;
      font-size: 12px;
      display: inline-block;
      height: 16px;
      line-height: 16px;
      padding: 0 6px;
      min-width: 17px;
      border-radius: 3px;
      background-color: #ccc;
      border: 1px solid #ccc;
      color: #fff;
    }
  }

  .guidance {
    background-color: #fff0da;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;

    em {
      margin-left: 8px;
      display: inline-block;
      vertical-align: middle;
      height: 21px;
      line-height: 21px;
      padding-left: 8px;
      padding-right: 8px;
      border: 1px solid #ff8d50;
      font-size: 12px;
      color: #ff8d50;
      border-radius: 10px;

      i {
        margin-left: 3px;
        font-size: 12px;
      }
    }
  }

  .title {
    padding: 0 12px;
    background-color: #fff;
    font-size: 12px;
    color: #666;
    display: flex;
    justify-content: space-between;

    .txt {
      font-size: 14px;
      color: #333;
      padding: 15px 0px 9px;
      border-bottom: 1px solid #fff;
      text-align: justify;
      word-break: break-all;
      line-height: 20px;
    }

    .collect {
      padding: 0 12px;
      background-color: #fff;
      font-size: 12px;
      color: #666;
      text-align: center;
      padding-top: 15px;
      padding-right: 0;

      i {
        font-size: 17.5px;
        color: #666;
      }

      span {
        color: #333;
        font-size: 12px;
        white-space: nowrap;
      }
    }
  }

  .item-price {
    font-size: 12px;
    color: #999;
    padding: 0 12px;
    background-color: #fff;
    padding-bottom: 16.5px;

    .price {
      justify-content: space-between;
      padding-top: 5.6px;
      line-height: 22.5px;
      display: flex;
      align-items: flex-end;

      span {
        font-size: 12px;
        color: #666;
      }

      .left {
        p {
          margin-right: 16px;

          .prefix,
          .money {
            font-size: 18px;
            color: #f74747;
          }
        }
      }
    }

    .member {
      margin-top: 8px;

      em {
        position: relative;
        margin-right: 8px;
        border-radius: 3px;
        background-color: #303030;
        border: 1px solid #303030;
        color: #e8ae3e;
        text-align: center;
        display: inline-block;
        height: 16px;
        line-height: 16px;
        padding: 0 6px;
        min-width: 17px;
      }

      span {
        color: #369;

        i {
          color: #369;
          vertical-align: baseline;
          font-size: 12px;
        }
      }
    }

    .sku-info {
      display: flex;
      padding-top: 11.5px;
      color: #666;

      em {
        display: inline-block;
        width: 63px;
      }

      span {
        display: inline-block;
        flex: 1;
        flex-wrap: wrap;

        i {
          margin-left: 5px;
        }
      }
    }
  }

  .divide {
    background-color: #f9f9f9;
    height: 5px;
  }

  .addr {
    padding: 0px 12px 7.5px;

    .van-cell {
      padding: 13.5px 0px 0px;
      font-size: 12px;
      color: #999;

      .van-cell__title {
        display: inline-flex;
        align-items: center;
        color: #333;
        margin-right: 23px;

        img {
          width: 13px;
          margin-left: 7.5px;
        }

        em {
          margin: 0px 5px 0px 7.5px;
          color: #666;
        }
      }
    }

    .van-popup {
      .van-picker {
        .van-picker__toolbar {

          .van-picker__cancel,
          .van-picker__confirm {
            width: 60px;
            color: #f0250f;
            letter-spacing: 6px;
            padding: 0px;
          }

          .van-picker__title {
            -webkit-box-flex: 1;
            flex: 1;
            overflow: hidden;
            font-size: 14px;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .van-picker__columns {
          .van-picker-column {
            .van-picker-column__item--selected {
              width: 100%;
              height: 34px;
              border-top: 1px solid #dadada;
              border-bottom: 1px solid #dadada;
              z-index: 3;
            }
          }
        }
      }
    }

    .desc {
      p {
        padding: 0 0 0 43.5px;
        margin: 9px 0;

        .item {
          white-space: nowrap;
          display: flex;
          justify-content: flex-start;
          padding: 4.5px 0 0;
          align-items: center;

          .tag {
            text-align: center;
            font-size: 12px;
            display: inline-block;
            height: 16px;
            line-height: 14px;
            padding: 0 6px;
            min-width: 15px;
            border-radius: 3px;
            color: rgb(102, 102, 102);
            background-color: hsla(0, 0%, 100%, 0);
            border: 1px solid rgb(204, 204, 204);
            margin-right: 8px;
          }

          .goods {
            color: #4997ee;
            border-color: #4997ee;
          }

          .txt {
            line-height: 1.8;
            font-size: 12px;
            color: #666;
          }

          .look {
            color: #369;
            margin-left: 9.5px;
            font-size: 12px;
          }
        }
      }
    }
  }

  .serve {
    padding: 0 12px;
    background-color: #fff;

    .van-cell {
      padding: 8px 0px;
      font-size: 12px;
      color: #999;

      .van-cell__title {
        display: inline-flex;
        align-items: center;
        color: #333;
        margin-right: 23px;
      }

      .van-cell__value {
        flex: none;
        margin-right: 12px;
        color: #666;

        em {
          color: #666 !important;
          margin-left: 12.5px;

          i {
            color: rgb(247, 71, 71);
          }
        }
      }
    }

    .van-popup {
      .van-action-sheet__header {
        text-align: left;
        font-size: 14px;
        padding-left: 12px;

        i {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }

  .param {
    padding: 0 12px;
    background-color: #fff;

    .van-cell {
      padding: 8px 0px;
      font-size: 12px;
      color: #999;

      .van-cell__title {
        display: inline-flex;
        align-items: center;
        color: #333;
        margin-right: 23px;
      }

      .van-cell__value {
        margin-right: 12px;
        color: #666;
      }
    }

    .van-popup {
      .van-action-sheet__header {
        font-size: 14px;
        text-align: left;
        padding-left: 12px;

        i {
          font-size: 16px;
          color: #333;
        }
      }

      .van-action-sheet__content {
        .content {
          ul {
            padding-bottom: 17.5px;

            li {
              margin: 0 12px;
              min-height: 44.5px;
              line-height: 30px;
              border-bottom: 1px solid #e5e5e5;
              display: flex;
              font-size: 12px;
              padding: 7.5px;

              .name {
                flex: 0 0 40%;
                font-size: 12px;
                color: #666;
              }

              .value {
                flex: 0 0 60%;
                font-size: 12px;
                color: #333;
              }
            }
          }
        }
      }
    }
  }

  .intro {
    background-color: #fff;
    color: #666;
    font-size: 14px;
    padding-bottom: 82px;
    padding-top: 13.5px;

    .titles {
      color: #333;
      font-weight: 400;
      font-size: 12px;
      line-height: 18px;
      padding: 0 12px;
      height: 18px;
    }

    .content {
      padding: 13.5px 12px;
      font-size: 12px;
      color: #666;
      line-height: 200%;
    }
  }

  .van-goods-action {
    border-top: 1px solid #ddd;
    height: 56.5px;

    .van-goods-action-icon {
      padding-top: 8px;
      font-size: 12px;
      color: #666;

      .van-goods-action-icon__icon {
        i {
          font-size: 18px;
          margin-bottom: 3px;
        }
      }
    }

    .van-goods-action-button--first {
      border-left: 1px solid #ddd;
      border-radius: 0;
      height: 100%;

      .van-button__content {
        .van-button__text {
          .van-stepper {
            width: 82px;
            height: 26px;
            margin: auto;

            .van-stepper__minus,
            .van-stepper__plus {
              font-weight: 100;
              font-size: 30px;
              width: 23.5px;
              height: 23.5px;
              line-height: 23.5px;
              display: block;
              float: left;
              text-align: center;
              border: 1px solid #cecece;
              color: #333;
              background-color: white;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
            }

            .van-stepper__input {
              font-size: 14px;
              width: 30px;
              height: 23.5px;
              line-height: 21px;
              display: block;
              color: #333;
              float: left;
              padding: 0;
              margin: 0;
              border: 1px solid #cecece;
              background-color: white;
              border-left: 0;
              border-right: 0;
            }

            .van-stepper__minus--disabled {
              color: #e2e2e2;
            }
          }
        }
      }
    }

    .van-goods-action-button--last {
      line-height: 55.5px;
      border: 0;
      background: #f74747;
      height: 100%;
      border-radius: 0;
      margin-right: 0px;
      color: #fff;
      width: 100%;
      font-size: 17px;
      text-align: center;
      float: right;
    }
  }

  .quick {
    position: fixed;
    right: 0;
    top: 30%;

    img {
      width: 58.5px;
      height: 58.5px;
    }
  }

  .van-overlay {
    .wrapper {
      .content {
        position: absolute;
        right: 0;
        top: 30%;
        display: flex;

        img {
          width: 58.5px;
          height: 58.5px;
        }

        .item {
          width: 52.5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding-top: 3px;
          background-color: white;
          font-size: 12px;
          color: #666;

          i {
            font-size: 22.5px;
            color: #333;
            margin-bottom: 3px;
          }
        }
      }
    }
  }
}

.van-dialog {
  background-color: #fff;
  width: 300px;
  border-radius: 3px !important;
  transform: translate(-50%, -50%) !important;
  padding: 28px 20px 0;
  box-shadow: 0 0 0.6rem 0 rgb(0 0 0 / 20%);

  .van-dialog__header {
    margin-bottom: 16px;
    padding: 0px;
    font-size: 14px;
    color: #333;
  }

  .van-dialog__content {
    max-height: 50vh;
    overflow-x: auto;
    color: #666;

    .van-dialog__message {
      padding: 8px 0px 26px;
      line-height: 1.8;
      font-size: 12px;
    }
  }


  .van-button {
    margin: 0px 0px 24px;
    font-size: 14px;
    height: 39px;
    line-height: 39px;
    text-align: center;
  }

  .van-button__text {
    color: white;
    background-color: #f74747;
    border: 1px solid #f74747;
    display: block;
    width: 220px;
    border-radius: 3px;
  }
}

.van-image-preview {
  background-color: black;

  .van-image-preview__index {
    display: none;
  }
}
</style>